<template>
  <div class="senior-search-div">
    <div
      class="search-title"
      style="text-align: center;justify-content: center;height: 50px;padding-top: 8px;padding-bottom: 8px;"
    >
      <span style="top: 8px;">高级搜索</span>
    </div>
    <div style="padding: 8px;">
      在：
      <el-select
        v-model="value"
        placeholder="请选择"
      >
        <div
          class="city-list"
          slot="empty"
        >

          <div
            class="city-list-item"
            v-for="item in cityList"
            :key="item.cityCode"
          >
            <div class="city">
              <el-link
                :underline="false"
                @click="selectCity(item)"
              >
                {{ item.name }}
              </el-link>
            </div>
            <div class="city-childs">
              <div
                v-for="ite in item.child"
                :key="ite.cityCode"
                class="city-childs-item"
              >
                <el-link
                  :underline="false"
                  @click="selectCity(ite)"
                >
                  {{ ite.name }}
                </el-link>
              </div>
            </div>
          </div>
        </div>
      </el-select>
    </div>
    <div>
      搜索：
      <div>
        <el-input
          placeholder="搜索地名"
          v-model="searchKey"
          clearable
        >
        <el-button
        slot="append"
        icon="el-icon-search"
        @click="searchKeyWord"
      ></el-button>
        </el-input>
      </div>
    </div>
  </div>
</template>

<script>
import { tdtAdmin, tdtSearch } from '@/api/tdt';

export default {
  data () {
    return {
      cityList: null,
      selectedCity: null,
      value: null,
      searchKey: null,
    }
  },
  methods: {
    // 行政区划，根据关键字查询行政区划信息；包括名称、类型（省市）、范围等
    searchGovernment () {

      let that = this;

      var params = {
        // 注意参数格式
        postStr: JSON.stringify({
          // 关键字
          "searchWord": '156000000',
          "searchType": '0',
          // 子项
          "needSubInfo": 'false',
          // 所有属性
          "needAll": 'true',
          // 边界属性，好像是不起作用
          "needPolygon": 'true',
          "needPre": 'true',
        }),
        type: 'query',
        // 请更换自己的 tk，此 tk 只能在当前域名下使用
        tk: '9aa421bfac4b31f0ad91a7118973689d'
      }
      tdtAdmin(params).then((res) => {
        that.cityList = res.data.child.sort((city1, city2) => {
          return parseInt(city1.cityCode) - parseInt(city2.cityCode);
        });
      })
    },
    selectCity (city) {
      this.selectedCity = city;
      this.value = city.name;
      console.log('选中：', this.selectedCity);
    },
    searchKeyWord () {
      if (this.selectedCity) {
        let that = this;
      var params = {
        // 注意参数格式
        postStr: JSON.stringify({
          // 关键字
          "keyWord": that.searchKey,
          "specify": that.selectedCity.cityCode,
          // 查询类型
          "queryType": 12,
          // 分页
          "start": '0',
          "count": '20',
          "show": '2'
        }),
        type: 'query',
        // 请更换自己的 tk，此 tk 只能在当前域名下使用
        tk: '9aa421bfac4b31f0ad91a7118973689d'
      };
      console.log('搜索数据')
      tdtSearch(params).then((res) => {
        console.log('搜索返回数据', res)
      });
      }
    }
  },
  mounted () {
    // this.searchGovernment();
  },
  beforeMount () {
    this.searchGovernment();
    // console.log('beforeMount:', this.cityList)
  }
}
</script>

<style lang="scss" scoped>
.senior-search-div {
  position: relative;
  z-index: 999;
  width: 20%;
  background-color: white;
  height: 400px;
  opacity: 0.8;
  padding: 8px;
}

.city-list {
  height: 400px;
  width: 300px;
  overflow: auto;
  overflow-x: hidden;
  padding: 8px;
}

.city-list-item {
  width: 100%;
  display: flex;
}

.city {
  width: 40%;
  height: 100%;
}

.city-childs {
  width: 60%;
  height: 100%;
}

.city-childs-item {
  float: left;
  padding: 5px;

  a {
    text-decoration: none;
  }
}
</style>